<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<meta name="viewport" content="width=device-width,initial-scale=1">
	<link rel="stylesheet" href="../css/bootstrap.min.css" />
	<link rel="stylesheet" type="text/css" href="../css/activity.css" />
	<script src="../js/jquery-1.11.3.js"></script>
    <link rel="icon" href="../images/event img/鹿鹿.png">
    <!-- <link rel="stylesheet" href="../css/event.css"> -->
</head>
<script type="text/javascript">
    window.onload=function(){
        var actcontainer = document.getElementById('actcontainer');
        var actlist = document.getElementById('actlist');
        var actbuttons = document.getElementById('actbuttons').getElementsByTagName('span');
        var actprev = document.getElementById('actprev');
        var actnext = document.getElementById('actnext');
        var index = 1;
        var animated = false ;
        var timer ;
        var browserWidth =  $(document).width();
        $(window).resize(function(){
        	browserWidth = $(document).width();
        })

        // var spanHtml = '';
        // for(var i = 0, len = $('#actlist div').length-2; i < len; i++) {
        // 	if (i == 0) 
        // 		spanHtml += '<span index=' + i + ' class = "on" ></span>';
        // 	else
        // 		spanHtml += '<span index=' + i + '></span>'；
        // }
        // console.log(spanHtml);
        // $("#actbuttons").html(spanHtml);
        
        $('#actlist').css('width',$(document).width()*$('#actlist div').length+'px');
        $('#actlist div').css('width',$(document).width()+'px');
console.log($('#actlist').css('width'));
        function showButton(){
            for (var i = 0; i < actbuttons.length; i++){
                if (actbuttons[i].className == 'on') {
                    actbuttons[i].className = '';
                    break;
                }
            }
            actbuttons[index-1].className = 'on';
        }

        function animate(offset){
            animated = true ;
            var newLeft = parseInt(actlist.style.left) + offset;
            var time = 300; //位移总时间
            var interval = 10; //位移间隔时间
            var speed = offset/(time/interval); //每一次位移量
            
            function go(){
                if ( (speed < 0 && parseInt(actlist.style.left) > newLeft) || (speed > 0 && parseInt(actlist.style.left) < newLeft) ) {
                    actlist.style.left = parseInt(actlist.style.left) + speed +'px';
                    setTimeout(go,interval);
                }
                else{
                    animated = false ;
                    actlist.style.left = newLeft + 'px';
                    if(newLeft > -$(document).width() ){
                        actlist.style.left = -$(document).width()*($('#actlist div').length-1) + 'px';
                    }
                    if(newLeft < -$(document).width()*($('#actlist div').length-1) ){
                        actlist.style.left = -$(document).width()*2 + 'px';
                    }
                }
            }
            go();
        }

        function play(){
            timer = setInterval(function(){
                actnext.onclick();
            },2000);
        }

        function stop(){
            clearInterval(timer);
        }

        actnext.onclick=function(){
            if (index == 4) {
                index = 1;
            }
            else{
                index +=1 ;            
            }
            showButton();
            if (!animated) {
                animate(-$(document).width());
            }
        }

        actprev.onclick=function(){
            if (index == 1) {
                index = 4;
            }
            else{
                index -=1;    
            }
            showButton();
            if (!animated) {
                animate($(document).width());
            } 
        }
        for (var i = 0; i < actbuttons.length; i++) {
            actbuttons[i].onclick = function(){
                if (this.className == 'on') {
                    return;
                }
                var myIndex = parseInt(this.getAttribute('index'));
                var offset = -$(document).width() * (myIndex - index);
                if (!animated) {
                    animate(offset); 
                }
                index = myIndex ;
                showButton();
            }
        }

        actcontainer.onmouseover = stop;
        actcontainer.onmouseout  = play;
    }
</script>
<body>
	<div class="actnav">
		<div class="leftside">
			<ul>
				<li>
					<a href="">首页</a>
				</li>
				<li>
					<a href="event.html">活动</a>
				</li>
				<li style="border-right: 1px solid white;padding-right: 110px;">
					<a href="">关于我们</a>
				</li>
			</ul>
		</div>
		<div class="rightside">	
			<ul>
				<li style="border-left: 1px solid white;padding-left: 15px;">
					<a href="login.html">注册</a>
				</li>
				<li>
					<a href="login.html">登录</a>
				</li>
			</ul>
			<img src="../images/activity/sousuo.png">
		</div>
	</div>
	
	<div id="actcontainer">
    	<div id="actlist">
    		<div style="background: url(../images/activity/轮播图4.png) center;"></div>
    		<div style="background: url(../images/activity/轮播图1.png) center;"></div>
    		<div style="background: url(../images/activity/轮播图2.png) center;"></div>
    		<div style="background: url(../images/activity/轮播图3.png) center;"></div>
    		<div style="background: url(../images/activity/轮播图4.png) center;"></div>
    		<div style="background: url(../images/activity/轮播图1.png) center;"></div>
    	</div>
    	<script type="text/javascript">
		$('#actcontainer div:first').css('left',-$(document).width()+'px');
		</script>
   		<div id="actbuttons">
	        <span index="1" class="on"></span>
	        <span index="2"></span>
	        <span index="3"></span>
	        <span index="4"></span>
	    </div>
	    <a href="javascript:" class="actarrow" id="actprev">&lt;</a>
	    <a href="javascript:" class="actarrow" id="actnext">&gt;</a>
	    <div>
	    	<div class="fixed fixedone">
	    		<img src="../images/activity/logop1.png">
	    	</div>
	    	<div class="fixed fixedtwo">
	    		<img src="../images/activity/linghangstudio.png">
	    	</div>
	    	<div class="fixed fixedthree">
	    		<p>活动登记网</p>
	    	</div>
	    	<div class="fixed fixedfour">
	    		<p>Linghang Studio·Activity Login</p>
	    	</div>
	    	<div class="fixed fixedfive">
	    		<span>助威青春</span>&nbsp  &nbsp  &nbsp  &nbsp  &nbsp  &nbsp  &nbsp  &nbsp  &nbsp<span>遇见未来</span>
	    	</div>
	    </div>
	</div>
	<div class="actfooter">
		<div class="container">
			<div class="row">
				<div class="col-md-4">
					<div class="guild">
                        <a href="login.html">
						<img src="../images/activity/icon1.png">
						<p>登录</p>
                        </a>
					</div>
				</div>
				<div class="col-md-4">
					<div class="guild">
                        <a href="login.html">                    
                        <img src="../images/activity/icon2.png">
                        <p>注册</p> 
                        </a>                  						
					</div>
				</div>	
				<div class="col-md-4">
					<div class="guild">
						<img src="../images/activity/icon3.png">
						<p style="margin-left: -1px;">我要登记活动</p>
					</div>
				</div>			
			</div>
		</div>
	</div>

    <div id="hot_acti">
        <center>
        <div>
        <hr>
        <span>热门活动</span>
        <hr>
        </div>
        </center>
    </div>
    <div class="container">  
        <div class="row">
            <div class="box col-lg-4 col-md-5" id="box1">
                <div class="img_box">
                    <a href="">
                    <img src="../images/event img/暑期社会实践.png" alt=""> 
                 </a> 
                </div>  
                    <div class="img_info">
                        <p>今年我校暑期社会实践活动以中国特色社会主义理论为指导，以“一学一做”为契机，组织动员学生根据地方经济社会发展的实际，广泛开展理论宣讲、社会调查、科技支农、教育帮扶、文化宣传、法律援助、环境保护、医疗服务等活动。</p>
                        <span class="more"><a href="#" >查看详情</a></span>
                    </div>           
            </div>
             <div class="box col-lg-4 col-md-5" id="box2">
                 <div class="img_box">
                     <a href="">
                        <img src="../images/event img/英语.png" alt="" class="img-renponse">
                     </a>
                </div>                   
                    <div class="img_info">
                        <p>为了促进教育翻译事业的发展和翻译水平的提高，调动广大翻译爱好者，尤其是高等院校的在校大学生提高翻译及应用技能的积极性，将举办第二届全国商务英语翻译大赛。2017年9月至10月份全国大学生商务英语翻译大赛的笔译组试点为湖北中医药大学外国语学院。日前，也欢迎广大热爱英语的同胞们加入我们，以及需要考级和报考商务英语翻译证书的同学们尽早与我们联系报名参与，在这里我院将为你们提供服务。</p>
                        <span class="more"><a href="#" >查看详情</a></span>
                    </div>
            </div>
            <div class="box col-lg-4 col-md-5" id="box3">
                <div class="img_box">
                    <a href="">
                        <img src="../images/event img/创业实训.png" alt="">
                    </a>
                </div>
                    <div class="img_info">
                        <p>为了满足学生获取创业知识、提升创业能力的迫切需要，进一步加强校内学生创业团队培育与孵化，拟举办武汉科技大学第四期创业实训班，现将相关事宜通知如下。</p>
                        <span class="more"><a href="#" >查看详情</a></span>
                    </div>             
            </div>
        </div>

        <div class="row">
            <div class="box col-lg-4 col-md-5" id="box1">
                <div class="img_box">
                    <a href="">
                    <img src="../images/event img/暑期社会实践.png" alt=""> 
                 </a> 
                </div>  
                    <div class="img_info">
                        <p>今年我校暑期社会实践活动以中国特色社会主义理论为指导，以“一学一做”为契机，组织动员学生根据地方经济社会发展的实际，广泛开展理论宣讲、社会调查、科技支农、教育帮扶、文化宣传、法律援助、环境保护、医疗服务等活动。</p>
                        <span class="more"><a href="#" >查看详情</a></span>
                    </div>           
            </div>
             <div class="box col-lg-4 col-md-5" id="box2">
                 <div class="img_box">
                     <a href="">
                        <img src="../images/event img/英语.png" alt="" class="img-renponse">
                     </a>
                </div>                   
                    <div class="img_info">
                        <p>为了促进教育翻译事业的发展和翻译水平的提高，调动广大翻译爱好者，尤其是高等院校的在校大学生提高翻译及应用技能的积极性，将举办第二届全国商务英语翻译大赛。2017年9月至10月份全国大学生商务英语翻译大赛的笔译组试点为湖北中医药大学外国语学院。日前，也欢迎广大热爱英语的同胞们加入我们，以及需要考级和报考商务英语翻译证书的同学们尽早与我们联系报名参与，在这里我院将为你们提供服务。</p>
                        <span class="more"><a href="#" >查看详情</a></span>
                    </div>
            </div>
            <div class="box col-lg-4 col-md-5" id="box3">
                <div class="img_box">
                    <a href="">
                        <img src="../images/event img/创业实训.png" alt="">
                    </a>
                </div>
                    <div class="img_info">
                        <p>为了满足学生获取创业知识、提升创业能力的迫切需要，进一步加强校内学生创业团队培育与孵化，拟举办武汉科技大学第四期创业实训班，现将相关事宜通知如下。</p>
                        <span class="more"><a href="#" >查看详情</a></span>
                    </div>             
            </div>
        </div>
    </div>

    <div class="footspace">Copyright © Wust LingHang 2017.7</div>
    <div style="margin:0 auto;" class="toShare">
        <ul>
            <li><img src="../images/activity/QQ.png" alt=""></li>
            <li><img src="../images/activity/facebook.png" alt=""></li>
            <li><img src="../images/activity/email.png" alt=""></li>
            <li><img src="../images/activity/phone.png" alt=""></li>
            <li><img src="../images/activity/weixin.png" alt=""></li>
        </ul>
    </div>
</body>
</html>        